<template>
	<div class="loading-container">
		<img :src="imageUrl" alt="加载图片" width="200" class="loadingBox" />
		<div class="loading">
			Loading<span class="dots">{{ dots }}</span>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 图片URL
			imageUrl: require('@/assets/images/HomePage/10001.png'), // 替换为你的图片URL
			// 用于显示的点
			dotCount: 0,
			// 当前的点数（省略号）
			dots: '',
		}
	},
	mounted() {
		// 设置定时器以每500ms更新一次省略号
		this.interval = setInterval(() => {
			this.dotCount = (this.dotCount + 1) % 4 // 0 to 3
			this.dots = '.'.repeat(this.dotCount)
		}, 500)
	},
	beforeDestroy() {
		// 组件销毁时清理定时器
		clearInterval(this.interval)
	},
}
</script>
<style lang="scss" scoped>
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	background: #ffffff;
	margin: 0;
	position: absolute;
	z-index: 9;
	img {
		width: 56px;
		height: 56px;
	}
	.loadingBox {
		animation: shake 0.4s ease-in-out infinite alternate; /* 增加动画时长 */
	}
	@keyframes shake {
		0% {
			transform: rotate(0deg);
		}
		20% {
			transform: rotate(-6deg); /* 在这里保持在 -6 旋转 */
		}
		40% {
			transform: rotate(6deg); /* 旋转到 6 度 */
		}
		50%,
		80%,
		100% {
			transform: rotate(0deg);
		}
	}
	.loading {
		font-size: 20px;
		margin-top: 10px;
		color: #cccccc;
	}
}
</style>
